<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div class="layui-form-item">
    <label class="layui-form-label">文件名称</label>
    <div class="layui-input-block">
        <input type="text" id="fileName" required lay-verify="required" placeholder="请输入文件信息" autocomplete="off"
               class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">文件信息</label>
    <div class="layui-input-block">
        <input type="text" id="fileInfo" required lay-verify="required" placeholder="请输入文件信息" autocomplete="off"
               class="layui-input">
    </div>
</div>
<button type="button" class="layui-btn" id="chooseBtn">
    <i class="layui-icon">&#xe67c;</i>选择文件
</button>
<button type="button" class="layui-btn" id="uploadBtn">
    上传
</button>
<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use('upload', function () {
        var upload = layui.upload;
        var $ = layui.jquery;
        //执行实例
        var uploadInst = upload.render({
            auto: false,
            bindAction: '#uploadBtn',
            accept: 'file',
            elem: '#chooseBtn' //绑定元素
            , url: '/fileUpload' //上传接口
            , done: function (res) {
                layer.msg("上传成功")
                //上传完毕回调
            }
            , error: function () {
                //请求异常回调
            }, data: {
                fileInfo: function () {
                    return $('#fileInfo').val();
                },
                fileName: function () {
                    return $('#fileName').val();
                },
            }
        });
    });
</script>
</body>
</html>